<!--//<%@page contentType="text/html"%>
//<%@page pageEncoding="UTF-8"%>-->
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户信息</title>
		<link rel="stylesheet" href="/lzproject/CSS/layui.css" />
		<script src="/lzproject/Js/jquery.min.js"></script>
	</head>

	<body>

		<body >
		<script type="text/javascript">
					$(document).ready(function(){

                   initData();

                  })
					
					 function initData(){
					     $.ajax({
               //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/lzproject/getuserinfo.do" ,//url
                success: function (result) {
                    var info = result.data;

                    $("#username").attr("value", info.username);
                    $("#phone_number").attr("value", info.phone_number);
                    $("#age").attr("value", info.age);
                    if(info.sex == 0){
                        $("#sex").attr("value", "男");
                    }
                    else{
                       $("#sex").attr("value", "女");
                    }
                   
                    $("#birthday").attr("value", info.birth);
                },
                error : function() {
                    alert("异常！");
                }
            });
					   }
					</script>
					
					
			<script type="text/javascript">
        function updatePassword() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/lzproject/update/password.do" ,//url
                data: $('#formPassword').serialize(),
                success: function (result) {
                    alert(result.msg);

                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
			<br>
			<br>
	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		<ul class="layui-tab-title">
			<li class="layui-this">我的资料</li>
			<li>头像</li>
			<li>密码</li>
		</ul>
		<div class="layui-tab-content" style="height: 100px;">
			<div class="layui-tab-item layui-show">
				<form class="layui-form layui-form-pane" lay-filter="example"
					id="form1">
					<div class="layui-form-item">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-inline">
							<input type="text" name="username" id="username"
								lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">联系方式</label>
						<div class="layui-input-inline">
							<input type="text" name="phone_number" id="phone_number"
								lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">年龄</label>
						<div class="layui-input-inline">
							<input type="text" name="age" id="age" lay-verify="required"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-inline">
							<input type="text" name="sex" id="sex" lay-verify="required"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">生日</label>
						<div class="layui-input-inline">
							<input type="text" name="birthday" id="birthday"
								lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<input type="button" class="layui-btn" lay-submit=""
							lay-filter="demo2" onclick="update()" value="修改信息">
					</div>
					<script type="text/javascript">
						function update() {
							$.ajax({
								//几个参数需要注意一下
								type : "GET",//方法类型
								dataType : "json",//预期服务器返回的数据类型
								url : "/lzproject/updataUserInfo.do",//url
								data : $('#form1').serialize(),
								success : function(result) {
									alert("修改成功!");

								},
								error : function() {
									alert("异常！");
								}
							});
						}
					</script>
				</form>
			</div>
			<div class="layui-tab-item">
				<div class="layui-upload-drag" id="user-image">
					<button type="button" class="layui-btn upload-img">
						<i class="layui-icon"></i>上传头像
					</button>
					<p>建议尺寸168*168,支持jpg、png、gif，最大不能超过50KB</p>
				</div>
			</div>
			<div class="layui-tab-item">
				<div class="layui-form layui-form-pane layui-tab-item layui-show">
					<form role="form"  method="post" id="formPassword">
						<div class="layui-form-item">
							<label for="L_pass" class="layui-form-label">新密码</label>
							<div class="layui-input-inline">
								<input type="password" id="L_pass" name="login_pass" required
									lay-verify="required" autocomplete="off"
									class="layui-input" />
							</div>
							<div class="layui-form-mid layui-word-aux">6-16个字符</div>
						</div>
						<div class="layui-form-item">
							<label for="L_repass" class="layui-form-label">确认密码</label>
							<div class="layui-input-inline">
								<input type="password" id="L_repass" name="login_pass_check"
									required lay-verify="required" autocomplete="off"
									class="layui-input" />
							</div>
						</div>
						<div class="layui-form-item">
							<!-- <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit>确认修改</button> -->
							<input type="button" class="layui-btn" onclick="updatePassword()"
								value="确认修改">
						</div>
					</form>
				</div>


			</div>
		</div>
	</div>
	<script src="/lzproject/Js/Navigation/layui.js" charset="utf-8"></script>
			<script>
				layui.use('element', function() {
					var $ = layui.jquery,
						element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
					//触发事件
					var active = {
						tabAdd: function() {
							//新增一个Tab项
							element.tabAdd('demo', {
								title: '新选项' + (Math.random() * 1000 | 0) //用于演示
									,
								content: '内容' + (Math.random() * 1000 | 0),
								id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
							})
						},
						tabDelete: function(othis) {
							//删除指定Tab项
							element.tabDelete('demo', '44'); 
							othis.addClass('layui-btn-disabled');
						},
						tabChange: function() {
							//切换到指定Tab项
							element.tabChange('demo', '22'); 
						}
					};
					$('.site-demo-active').on('click', function() {
						var othis = $(this),
							type = othis.data('type');
						active[type] ? active[type].call(this, othis) : '';
					});
					//Hash地址的定位
					var layid = location.hash.replace(/^#test=/, '');
					element.tabChange('test', layid);
					element.on('tab(test)', function(elem) {
						location.hash = 'test=' + $(this).attr('lay-id');
					});

				});
			</script>
			<script>
				layui.use('upload', function() {
					var $ = layui.jquery,
						upload = layui.upload;
					//拖拽上传
					upload.render({
						elem: '#user-image',
						url: '/upload/',
						done: function(res) {
							console.log(res)
						}
					});
				})
			</script>
		</body>
	</body>

</html>